<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 第4忆库：四中校友记忆档案馆</title>
    <style>
        /* Global Styles */
        body {
            font-family: 'SimSun', '宋体', serif;
            background-color: #F8F4E9;
            color: #5C4033;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        /* Header (Reusing your existing style) */
        header {
            text-align: center;
            padding: 0.5rem 0 1rem;
            background: #F8F4E9;
            border-bottom: 1px solid #E8D9C5;
            margin-top: 0;
        }

        .logo {
            font-size: 3rem;
            font-weight: 900;
            letter-spacing: 4px;
            text-transform: uppercase;
            font-family: 'Times New Roman', serif;
            color: #8B4513;
            text-shadow: 2px 2px 0 #D2B48C, 4px 4px 0 rgba(0,0,0,0.2);
            position: relative;
            display: inline-block;
            margin: 0.5rem 0 1rem;
            padding: 0.5rem 2rem;
            background: linear-gradient(135deg, #F5F5DC 25%, #FAEBD7 100%);
            border: 3px double #A0522D;
            box-shadow: 0 8px 20px rgba(139, 69, 19, 0.3), inset 0 0 10px rgba(0,0,0,0.1);
            transform: rotate(-2deg);
            z-index: 100;
            line-height: 1.2;
        }

        .vintage-nav ul {
            display: flex;
            justify-content: center;
            gap: 1rem;
            padding: 0;
            margin: 0;
            list-style: none;
            flex-wrap: wrap;
        }

        .nav-button {
            display: flex;
            align-items: center;
            padding: 0.6rem 1.2rem;
            background: #EDE4D3;
            color: #5C4033;
            text-decoration: none;
            font-family: 'SimSun', serif;
            font-size: 1rem;
            border: 1px solid #C4A484;
            border-radius: 30px;
            box-shadow: 2px 2px 0 #D2B48C, inset 0 0 5px rgba(255,255,255,0.5);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        /* Contact Page Specific Styles */
        .vintage-contact-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 1rem 2rem;
        }

        .contact-title {
            text-align: center;
            color: #8B4513;
            font-size: 2.2rem;
            border-bottom: 3px dotted #C4A484;
            padding-bottom: 1rem;
            margin-top: 2rem;
            position: relative;
        }

        .contact-title::after {
            content: "✉";
            position: absolute;
            right: 10%;
            top: -15px;
            font-size: 1.5rem;
            opacity: 0.3;
        }

        .contact-card {
            background: #FAEBD7;
            border: 8px double #A0522D;
            padding: 2rem;
            margin: 3rem 0;
            position: relative;
            box-shadow: 5px 5px 0 #D2B48C;
        }

        .vintage-stamp {
            position: absolute;
            top: -15px;
            right: -15px;
            width: 60px;
            height: 60px;
            background: #D2B48C;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transform: rotate(15deg);
            border: 2px dashed #8B4513;
            font-size: 1.2rem;
        }

        .contact-email {
            display: inline-block;
            background: #8B4513;
            color: #FFF;
            padding: 0.8rem 1.5rem;
            margin-top: 1rem;
            text-decoration: none;
            font-weight: bold;
            border-radius: 30px;
            transition: 0.3s;
            box-shadow: 2px 2px 0 #5C4033;
        }

        .contact-email:hover {
            background: #A0522D;
            transform: translateY(-3px);
        }

        .contact-methods {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin: 3rem 0;
        }

        .method {
            background: #EDE4D3;
            padding: 1.5rem;
            border: 3px solid #D2B48C;
            border-radius: 5px;
            position: relative;
            transition: transform 0.3s;
        }

        .method:hover {
            transform: translateY(-5px);
        }

        .method h3 {
            color: #8B4513;
            margin-top: 0;
        }

        .qr-placeholder {
            width: 150px;
            height: 150px;
            margin: 1rem auto;
            background: #FFF;
            border: 1px dashed #8B4513;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }

        .guidelines {
            background: #EDE4D3;
            padding: 1.5rem 2rem;
            border-left: 5px solid #A0522D;
            margin: 3rem 0;
        }

        .guidelines h2 {
            color: #8B4513;
            margin-top: 0;
        }

        .guidelines ul {
            padding-left: 1.5rem;
        }

        .guidelines li {
            margin-bottom: 0.8rem;
            position: relative;
            left: -5px;
        }

        footer {
            text-align: center;
            padding: 2rem;
            margin-top: 3rem;
            background: #EDE4D3;
            border-top: 1px solid #D2B48C;
            font-size: 0.9rem;
            color: #8B4513;
        }

        @media (max-width: 768px) {
            .logo {
                font-size: 2rem;
                padding: 0.5rem 1.5rem;
            }
            
            .contact-methods {
                grid-template-columns: 1fr;
            }
            
            .contact-title {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">第4忆库</div>
        <nav class="vintage-nav">
            <ul>
                <li><a href="html xf.html" class="nav-button"><span class="nav-icon">📜</span>主页</a></li>
                <li><a href="vintage-objects.html" class="nav-button"><span class="nav-icon">📜</span>收藏集</a></li>
                <li><a href="about_page.html" class="nav-button"><span class="nav-icon">ℹ️</span>关于</a></li>
                <li><a href="contact.html" class="nav-button"><span class="nav-icon">✉️</span>联系</a></li>
            </ul>
        </nav>
    </header>

    <div class="vintage-contact-container">
        <h1 class="contact-title">📮 联系第4忆库</h1>
        
        <div class="contact-card">
            <div class="vintage-stamp">怀旧</div>
            <h2>📨 投稿/分享</h2>
            <p>欢迎提供老照片、校服、笔记等实物的电子照片，您的每件捐赠都将成为校友共同的记忆宝藏。</p>
            <a href="mailto:mrxijordan@163.com" class="contact-email">mrxijordan@163.com</a>
        </div>

       
        </div>

        <div class="guidelines">
            <h2>📜 投稿须知</h2>
            <ul>
                <li><strong>时间范围：</strong>接收建校以来所有校园物品</li>
                <li><strong>电子版：</strong>可以手机直接拍照，发送到上述邮箱中，并标注您的毕业年份与姓名（若想匿名处理可以不提交姓名）</li>
                <li><strong>回忆文章：</strong>欢迎把原稿发送到上述邮箱中，并标注您的毕业年份与姓名（若想匿名处理可以不提交姓名）</li>
                <li><strong>版权声明：</strong>投稿即授权在非商业用途中使用</li>
            </ul>
        </div>
    </div>

    <footer>
        <p>第4忆库 © 2025 - 记忆数字化档案馆</p>
        <p>本网站为非营利性项目 | 所有资料仅限文化交流使用</p>
    </footer>
</body>
</html>